<template>
  {{ props.data }}
  <div
    class="index-table"
    v-for="item in templateData?.performanceAssessmentTemplateDimensionality"
    :key="item.type"
  >
    <div class="index-card" v-if="item.type === 1">
      <ConditionBox>
        <template #left>
          <div class="title">关键业绩考核</div>
          维度权重：{{ item.weight }}
        </template>
        <template #right></template>
      </ConditionBox>
      <a-divider />
      <IndexTable
        v-model:data="templateData.performanceKeyPerformanceIndexLibraryUse"
        :review="props.review"
      />
    </div>
    <div class="index-card" v-if="item.type === 2">
      <ConditionBox>
        <template #left>
          <div class="title">能力素质考核</div>
          维度权重：{{ item.weight }}
        </template>
        <template #right></template>
      </ConditionBox>
      <a-divider />
      <AbilityIndeTable
        v-model:data="templateData.performanceAbilityQualityIndexLibraryUse"
        :review="props.review"
      />
    </div>
    <div class="index-card" v-if="item.type === 3">
      <ConditionBox>
        <template #left>
          <div class="title">工作计划指标库</div>
          维度权重：{{ item.weight }}
        </template>
        <template #right></template>
      </ConditionBox>
      <a-divider />
      <WorkPlanTable
        v-model:data="templateData.performanceWorkPlanIndexLibraryUse"
        :review="props.review"
      />
    </div>
    <div class="index-card" v-if="item.type === 4">
      <ConditionBox>
        <template #left>
          <div class="title">目标与关键成果指标库</div>
          维度权重：{{ item.weight }}
        </template>
        <template #right></template>
      </ConditionBox>
      <a-divider />
      <TargetTable
        v-model:data="templateData.performanceTargetIndexLibraryUse"
        :review="props.review"
      />
    </div>
    <div class="index-card" v-if="item.type === 5">
      <ConditionBox>
        <template #left>
          <div class="title">加减分项指标</div>
          <!-- 维度权重：{{ item.weight }} -->
        </template>
        <template #right></template>
      </ConditionBox>
      <a-divider />
      <AddSubtractTable
        v-model:data="templateData.performanceAddSubtractIndexLibraryUse"
        :review="props.review"
      />
    </div>
    <div class="index-card" v-if="item.type === 6">
      <ConditionBox>
        <template #left>
          <div class="title">否决指标</div>
          <!-- 维度权重：{{ item.weight }} -->
        </template>
        <template #right></template>
      </ConditionBox>
      <a-divider />
      <VetoTable
        v-model:data="templateData.performanceVetoIndexLibraryUse"
        :review="props.review"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { cloneDeep } from 'lodash';
import { PerformanceAppraisal } from '@/apis/management/performance/baseSetting/template/type';
import IndexTable from './AssessmentTable/index.vue';
import AbilityIndeTable from './AbilityIndeTable/index.vue';
import WorkPlanTable from './WorkPlanTable/index.vue';
import TargetTable from './TargetTable/index.vue';
import AddSubtractTable from './AddSubtractTable/index.vue';
import VetoTable from './VetoTable/index.vue';

const props = withDefaults(
  defineProps<{
    data: PerformanceAppraisal;
    review?: boolean;
  }>(),
  {}
);
const emit = defineEmits(['handleOk', 'update:data']);
const handleOk = () => {
  emit('handleOk');
};
const change = () => {
  emit('update:data', templateData.value);
};
const templateData = ref<PerformanceAppraisal>({});
watch(
  () => props.data,
  () => {
    templateData.value = props.data;
  },
  { deep: true }
);
</script>

<style lang="less" scoped>
.index-table {
  // margin: 20px;
  .index-card {
    margin: 20px 0;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    padding: 20px;
    border-radius: 10px;
    .title {
      font-weight: 600;
      font-size: 18px;
    }
  }
}
</style>
